<template>
  <!-- 项目编辑对话框 -->
  <el-dialog
    :visible.sync="findLogDialogVisible"
    top="70px"
    width="50%"
    @opened="opened()"
    :before-close="closeDialog"
  >
    <span class="main" style="height: 200px">
      <div id="projectChart" :style="{ width: '100%', height: '500%' }"></div
    ></span>
    <!-- <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="closeDialog">确 定</el-button>
    </span> -->
  </el-dialog>
</template>

<script>
export default {
  props: ["findLogDialogVisible", "analysisData"],
  data() {
    return {};
  },
  methods: {
    opened() {
      this.projectChart();
      console.log(this.analysisData);
    },
    // 渲染图表
    projectChart() {
      let projectChart = this.$echarts.init(
        document.getElementById("projectChart"),
        "customed"
      );
      // 绘制图表
      let option;
      // 所有状态数据
      const task = [
        // {
        //   name: "任务1",
        //   state: [
        //     [1, 1, 1, 1, 2, 1, 1],
        //     [1, 2, 1, 1, 2, 1, 1],
        //   ],
        // },
      ];
      // 将获取到的任务状态添加到tesk中
      this.analysisData.data.forEach((val, index) => {
        // console.log("---------先看看数据------", index, val);
        task.push({
          name: val.name,
          state: [val.run_state, val.abnormal_state],
        });
      });
      // 横坐标
      const days = [];
      task.forEach((val) => {
        days.push(val.name);
      });
      // console.log(days);
      // 纵坐标
      const date = this.analysisData.data[0].date;
      // [
      //   "Saturday",
      //   "Friday",
      // ];
      // prettier-ignore
      const noData = []
      task.forEach((val, index) => {
        date.forEach((vals, indexs) => {
          noData.push([
            index,
            indexs,
            1,
            val.state[0][indexs],
            val.state[1][indexs],
          ]);
        });
      });
      // [第几个任务，任务第几个数据，大小，运行状态，异常状态]
      const data = noData.map(function (item) {
        return [item[1], item[0], item[2], item[3], item[4]];
      });
      option = {
        title: {
          text: this.$t("projectDialog.title.echart"),
        },
        legend: {
          data: [
            this.$t("projectDialog.title.run"),
            this.$t("projectDialog.title.abnormal"),
          ],
          left: "right",
        },
        tooltip: {
          position: "top",
          formatter: function (params) {
            // console.log(params.value[3] == 0 ? "正常" : "异常");
            return (
              days[params.value[1]] +
              " in " +
              date[params.value[0]] +
              " running" +
              (params.value[3] == 1 ? "normally" : "abnormally")
            );
          },
        },
        grid: {
          left: 50,
          bottom: 10,
          right: 50,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: date,
          boundaryGap: false,
          splitLine: {
            show: true,
          },
          axisLine: {
            show: true,
          },
        },
        yAxis: {
          type: "category",
          data: days,
          offset: 30,
          // 网格线
          splitLine: {
            show: true,
          },
          axisLine: {
            // 轴线
            show: true,
          },
        },
        series: [
          // 第一个散点 表示运行状态
          {
            name: "第一个为运行状态",
            type: "scatter",
            symbol: "rect",
            symbolOffset: ["-50%", 0],
            itemStyle: {
              // 设置散点的边框
              borderWidth: 1,
              borderColor: "#fff",
              color: function (val) {
                // console.log(val.data[3]);
                return val.data[3] == 0 ? "#91cc75" : "#ee6666";
              },
            },
            // 控制散点大小
            symbolSize: function (val) {
              return val[2] * 20;
            },
            data: data,
            animationDelay: function (idx) {
              return idx * 5;
            },
          },
          // 第二个散点 表示异常状态
          {
            name: "第二个为异常状态",
            type: "scatter",
            symbol: "rect",
            symbolOffset: ["50%", 0],
            itemStyle: {
              color: function (val) {
                // console.log(val.data[3]);
                return val.data[4] == 0 ? "#91cc75" : "#ee6666";
              },
            },
            // 控制散点大小
            symbolSize: function (val) {
              return val[2] * 20;
            },
            data: data,
            animationDelay: function (idx) {
              return idx * 5;
            },
          },
        ],
      };

      option && projectChart.setOption(option);
      // projectChart.dispose();  // 销毁echart图标 解决浏览器警告问题
    },

    // 关闭弹出框
    closeDialog() {
      this.$emit("closeDialog");
    },
  },
};
</script>

<style lang='less' scoped>
</style>